<template>
  <div class="basic_info">
    <div class="info_operation_btn">
      <div class="btn_left">
        <el-button type="primary" @click="checkOrder">查看单据</el-button>
        <el-button :disabled="!buttonsPermissions.DaoChu" :class="!buttonsPermissions.DaoChu ? 'disabled_button' : ''"
          @click="exportExcel">导出</el-button>
        <el-button :disabled="!buttonsPermissions.DaYin" :class="!buttonsPermissions.DaYin ? 'disabled_button' : ''"
          @click="handleShortcutKeyPrint">打印(P)</el-button>
      </div>
      <div class="btn_right">
        <!-- <el-select @change="changeDate" v-model="monthValue">
          <el-option
            style="font-size: 12px"
            v-for="item in monthOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div class="date_picker_style" v-if="isShowDate">
          <p>{{ queryData.dateRange.startDate }}~{{ queryData.dateRange.endData }}</p>
          <el-date-picker
            v-model="nowDate"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="onClickPicker"
          >
          </el-date-picker>
          <i class="el-icon-date"></i>
        </div>

        <el-button type="primary" @click="onQuery">查询</el-button>-->
        <i @click="onShowColumn()" class="set_up el-icon-s-tools"></i>
      </div>
    </div>
    <div class="info_content_div">
      <div class="div_table">
        <div class="div_screen">
          <div class="screen_left">
            <el-checkbox v-model="queryData.hideRedRush">隐藏红冲单据</el-checkbox>
            <el-checkbox v-model="queryData.hideUnVerify">隐藏未审核单据</el-checkbox>
          </div>
          <div class="screen_right">
            <div style="display: flex; align-items: baseline; margin-right: 40px">
              <p style="margin-right: 20px;">单据类型</p>
              <el-select
                clearable
                style="width: 2rem;"
                placeholder
                v-model="queryData.orderType"
                @change="orderTypeChange"
                filterable
              >
                <el-option
                  style="font-size: 12px"
                  v-for="item in orderTypeList"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <el-select @change="changeDate" v-model="monthValue">
              <el-option style="font-size: 12px" v-for="item in monthOptions" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
            <!-- <div class="date_picker_style" v-if="isShowDate">
              <p>{{ queryData.dateRange.startDate }}~{{ queryData.dateRange.endData }}</p>
              <el-date-picker
                v-model="nowDate"
                type="daterange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="onClickPicker"
              >
              </el-date-picker>
              <i class="el-icon-date"></i>
            </div>-->
            <el-date-picker v-if="isShowDate" v-model="nowDate" type="daterange" range-separator="~"
              start-placeholder="开始日期" end-placeholder="结束日期" @change="onClickPicker"
              value-format="yyyy-MM-dd"></el-date-picker>
            <el-button type="primary" @click="onQuery">查询</el-button>
          </div>
        </div>
        <div class="table_content">
          <el-table ref="tableList" show-summary :summary-method="getSummaries" highlight-current-row :header-cell-style="{
            background: '#E3F6FF',
            color: '#666666',
            textAlign: 'center',
            height: '30px',
            borderColor: '#dddddd',
          }" :cell-style="{ textAlign: 'center' }" :data="tableData" height="100%" style="width: 100%"
            @row-click="clickRow">
            <el-table-column :resizable="false" label="序号" type="index" width="50"></el-table-column>
            <template v-for="(item, index) in columnData">
              <el-table-column :show-overflow-tooltip="true" :key="index"
                :label="item.zidingyiName ? item.zidingyiName : item.morenName" v-if="item.zidingyiState"
                :prop="item.props" min-width="130px" :sortable="item.sortable"
                :width="item.props == 'orderNumber' ? '170px' : ''">
                <template slot-scope="scope">
                  <span v-if="item.props == 'createOrderDate'">{{ orderdateFormat(scope.row) }}</span>
                  <span
                    v-else-if="item.props == 'reduceCapital' || item.props == 'addCapital' || item.props == 'initialBalance' || item.props == 'balance'">
                    {{
                      $formatMoney(scope.row[item.props]) }}
                  </span>
                  <span v-else>{{ commonFormat(scope.row, item.props) }}</span>
                </template>
              </el-table-column>
            </template>
          </el-table>
        </div>
        <div class="table_pagination">
          <div class="pagination_div">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="currentPage" :page-sizes="[20, 50, 100, 200]" :page-size="pagesize"
              layout="jumper, prev, pager,next, sizes" :total="total"></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 列配置弹框 -->
    <CConfiguration ref="setColumnRef" :defaultColumnDataArr="defaultColumnData" :columnDataArr="columnData" orderType="现金银行统计表明细" @onSaveColumn="onSaveColumn">
    </CConfiguration>
    <!-- 打印 -->
    <dialog-print ref="print"></dialog-print>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { dateStrFromDate } from '@/utils/DateFormatter'
import CConfiguration from '@/components/c_column/columnConfiguration1'
/**打印 */
import dialogPrint from '@/views/components/dialogPrintStatic'
import { getAction, postAction, downPostFile } from '@/api/manage'
import { toBillDetail } from '@/utils/billUtil'
import { handlePermissions, handleOtherPerms } from '@/utils/index'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { delcommafy } from '../../../utils'
export default {
  name: 'cashBankDetailed',
  mixins: [JeecgListMixin],
  computed: {
    ...mapGetters(['name']),
    buttonsPermissions() {
      return handlePermissions('现金银行统计表')
    },
    printPermissions() {
      return handleOtherPerms('单据可多次打印')
    },
  },
  components: {
    CConfiguration,
    dialogPrint,
  },
  created() {
    this.bankId = this.$route.query.id
    // 默认获取当月时间
    this.getTimeRange(this.$setTimeRange(5))
    this.selectTitle()
    this.getData()
  },
  watch: {
    'queryData.hideRedRush': {
      deep: true,
      handler() {
        let str = JSON.stringify(this.queryData)
        let arr = JSON.parse(str)
        this.requestQuery(arr)
      },
    },
    'queryData.hideUnVerify': {
      deep: true,
      handler() {
        let str = JSON.stringify(this.queryData)
        let arr = JSON.parse(str)
        this.requestQuery(arr)
      },
    },
  },
  data() {
    return {
      // 查询条件数据
      queryData: {
        // 直接触发
        hideRedRush: false,
        hideUnVerify: false,
        orderType: '',
        // orderStatus: '5',
        // 日期选择范围
        dateRange: {
          startDate: '',
          endData: '',
        },
      },
      monthValue: '本月',
      monthOptions: [
        {
          value: '今日',
          label: '今日',
        },
        {
          value: '本周',
          label: '本周',
        },
        {
          value: '本月',
          label: '本月',
        },
        {
          value: '本年',
          label: '本年',
        },
      ],
      isShowDate: true, // 是否显示选择时间组件
      nowDate: [],
      // 单据类型
      orderTypeList: [
        { text: '采购订单', value: '1' },
        { text: '采购入库单', value: '2' },
        { text: '采购退货单', value: '3' },
        { text: '采购换货单', value: '4' },
        { text: '销售订单', value: '5' },
        { text: '销售出库单', value: '6' },
        { text: '销售退货单', value: '7' },
        { text: '销售换货单', value: '8' },
        { text: '收款结算单', value: '14' },
        { text: '付款结算单', value: '15' },
        { text: '资金增加', value: '19' },
        { text: '资金减少', value: '20' },
        { text: '一般费用单', value: '27' },
        { text: '其他收入单', value: '28' },
        { text: '物流代收结算单', value: '29' },
        { text: '物流代付结算单', value: '30' },
        { text: '物流运费结算单', value: '31' },
        { text: '转账单', value: '35' },
      ],
      defaultColumnData: [],
      // 表格数据
      tableData: [],
      // 列配置数据
      columnData: [
        {
          id: '1',
          morenName: '单据类型',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 1,
          zidingyiSort: 1,
          noModify: false,
          props: 'orderType_dictText',
        },
        {
						id: '2',
						morenName: '单据编号',
						zidingyiName: '',
						morenState: true,
						zidingyiState: true,
						morenSort: 1,
						zidingyiSort: 1,
						noModify: false,
						props: 'orderNumber',
					},
        {
          id: '3',
          morenName: '单据日期',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 2,
          zidingyiSort: 2,
          noModify: false,
          props: 'createOrderDate',
        },
        {
          id: '4',
          morenName: '单据制单人',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 3,
          zidingyiSort: 3,
          noModify: false,
          props: 'createName',
        },
        {
          id: '5',
          morenName: '摘要',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 4,
          zidingyiSort: 4,
          noModify: false,
          props: 'abstractMark',
        },
        {
          id: '6',
          morenName: '此前余额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 5,
          zidingyiSort: 5,
          noModify: false,
          props: 'initialBalance',
        },
        {
          id: '7',
          morenName: '借方金额(增加)',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 6,
          zidingyiSort: 6,
          noModify: false,
          props: 'addCapital',
        },
        {
          id: '8',
          morenName: '贷方金额(减少)',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 7,
          zidingyiSort: 7,
          noModify: false,
          props: 'reduceCapital',
        },
        {
          id: '9',
          morenName: '余额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 8,
          zidingyiSort: 8,
          noModify: false,
          props: 'balance',
        },
        {
          id: '10',
          morenName: '状态',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 9,
          zidingyiSort: 9,
          noModify: false,
          props: 'orderStatus_dictText',
        },
        {
          id: '11',
          morenName: '备注',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 10,
          zidingyiSort: 10,
          noModify: false,
          props: 'remark',
        },
        {
          id: '12',
          morenName: '往来单位',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 11,
          zidingyiSort: 11,
          noModify: false,
          props: 'xghCompanyName',
        },
        {
          id: '13',
          morenName: '物流公司',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 12,
          zidingyiSort: 12,
          noModify: false,
          props: 'xghExpressId_dictText',
        },
        {
          id: '14',
          morenName: '物流单号',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 13,
          zidingyiSort: 13,
          noModify: false,
          props: 'expressNumber',
        },
      ],
      bankId: '',
      orderItem: '',
      total: 0,
      pagesize: 20, //每页的数据条数
      currentPage: 1, //默认开始页面
      showLiepeizhi: false, //是否显示列配置
      updateId: '',
      url: {
        listUrl: '/financialstatements/cashBankStatistics/countCashBankStatisticsDetail',
        exportExcel: '/financialstatements/cashBankStatistics/exportCountCashBankStatisticsDetailXls',
        api: '/financialstatements/cashBankStatistics/countCashBankStatisticsDetail11',
      },
      pageName: '现金银行统计表明细',
    }
  },
  methods: {
    // 打印
    async handleShortcutKeyPrint() {
      // 查询
      let data = {
        ...this.queryData,
        startDate: this.queryData.dateRange.startDate,
        endDate: this.queryData.dateRange.endData,
        pageNo: 1,
        pageSize: 1000000,
        bankId: this.bankId,
      }
      let printExclusive = []
      const res = await postAction(this.url.listUrl, data)
      if (res.code == 200) {
        printExclusive = res.result.records || []
      }
      this.onQuery()
      // 打印
      if (!this.buttonsPermissions.DaYin) {
        this.$elMessage.warning('未拥有打印权限！')
      } else if (!printExclusive || printExclusive.length <= 0) {
        this.$elMessage.warning('没有要打印的记录！')
      } else {
        let printData = {
          riqi: this.queryData.dateRange.startDate + '~' + this.queryData.dateRange.endData,
          printExclusive,
        }
        // 可以多次打印设置
        if (this.printPermissions) {
          this.$refs.print.show(printData, this.columnData, this.pageName)
        } else {
          if (this.$lcStorage.get('printLimitValue')) {
            // 获取打印次数
            this.getPrintNum(this.pageName, (() => {
              this.$refs.print.show(printData, this.columnData, this.pageName)
            }))
          } else {
            this.$refs.print.show(printData, this.columnData, this.pageName)
          }
        }
      }
    },
    // 查看单据
    checkOrder() {
      if (!this.orderItem || !this.orderItem.orderType) {
        this.$elMessage.warning('请先选择单据！')
        return
      }
      toBillDetail(this, this.orderItem.orderType, this.orderItem.documentOrderId)
    },
    // 导出
    exportExcel() {
      let data = {
        ...this.queryData,
        startDate: this.queryData.dateRange.startDate,
        endDate: this.queryData.dateRange.endData,
        bankId: this.bankId,
      }
      downPostFile(this.url.exportExcel, '现金银行统计表明细', data)
    },
    // 点击某一行
    clickRow(row) {
      this.orderItem = row
    },
    // 获取数据
    getData() {
      let data = {
        ...this.queryData,
        startDate: this.queryData.dateRange.startDate,
        endDate: this.queryData.dateRange.endData,
        pageNo: this.currentPage,
        pageSize: this.pagesize,
        bankId: this.bankId,
      }
      postAction(this.url.listUrl, data).then(res => {
        if (res.code == 200) {
          this.tableData = res.result.records
          this.total = res.result.total
        }
      })
    },
    // 查询
    onQuery() {
      let str = JSON.stringify(this.queryData)
      let arr = JSON.parse(str)
      arr.dateRange.startDate = arr.dateRange.startDate + ' 00:00:00'
      arr.dateRange.endData = arr.dateRange.endData + ' 23:59:59'
      let obj = {
        ...arr,
      }
      this.currentPage = 1
      this.requestQuery(obj)
    },
    // 请求筛选条件数据
    requestQuery(obj) {
      // if (this.queryData.hideRedRush && this.queryData.hideUnVerify) {
      //   this.queryData.orderStatus = '5,0,20'
      // } else if (this.queryData.hideRedRush && !this.queryData.hideUnVerify) {
      //   this.queryData.orderStatus = '5,20'
      // } else if (!this.queryData.hideRedRush && this.queryData.hideUnVerify) {
      //   this.queryData.orderStatus = '5,0'
      // } else {
      //   this.queryData.orderStatus = '5'
      // }
      this.getData()
    },
    // 判断当前选择时间段
    changeDate(val) {
      this.isShowDate = true
      switch (val) {
        case '全部':
          this.isShowDate = false
          break
        case '今日':
          this.getTimeRange(this.$setTimeRange(1))
          break
        case '昨天':
          this.getTimeRange(this.$setTimeRange(2))
          break
        case '本周':
          this.getTimeRange(this.$setTimeRange(3))
          break
        case '上周':
          this.getTimeRange(this.$setTimeRange(4))
          break
        case '本月':
          this.getTimeRange(this.$setTimeRange(5))
          break
        case '上月':
          this.getTimeRange(this.$setTimeRange(6))
          break
        case '本年':
          this.getTimeRange(this.$setTimeRange(7))
          break
        case '去年':
          this.getTimeRange(this.$setTimeRange(8))
          break
        default:
          break
      }
    },
    // 获取时间范围并设置
    getTimeRange(data) {
      this.nowDate = [data.now, data.end]
      this.queryData.dateRange.startDate = data.now
      this.queryData.dateRange.endData = data.end
    },
    // 获取当前选中时间
    onClickPicker(val) {
      this.queryData.dateRange.startDate = val[0]
      this.queryData.dateRange.endData = val[1]
    },
    // 初始化查询列配置值
    async selectTitle() {
      let obj = await this.$setColumn.selectColumn(this.pageName)
      if (obj.code === 200) {
        this.updateId = obj.updateId
        this.columnData = obj.columnData
      } else if (obj.code === 500) {
        let id = await this.$setColumn.addColumn(this.pageName, this.columnData, 0, this.updateId)
        this.updateId = id
      }
    },
    // 修改列配置后保存修改后的值
    async onSaveColumn(value) {
      this.columnData = value
      let res = await this.$setColumn.editColumn(this.pageName, this.columnData, this.updateId)
      if (res) {
        this.$elMessage.success('编辑成功!')
      } else {
        this.$elMessage.error('编辑失败!')
      }
    },
    // 触发列配置弹框
    onShowColumn () {
      this.defaultColumnData = this.$options.data().columnData
      this.$refs.setColumnRef.dialogVisible = true
    },
    // 合计列计算
    getSummaries(param) {
      this.$nextTick(() => {
        this.$refs.tableList.doLayout();
      })
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 1) {
          sums[index] = '共' + this.total + '条明细'
        } else if (['reduceCapital', 'addCapital', 'initialBalance', 'balance'].includes(column.property)) {
          const values = data.map((item) => delcommafy(item[column.property]))
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = delcommafy(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = this.$formatMoney(sums[index])
          } else {
            sums[index] = ''
          }
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    // 获取每页几条数据
    handleSizeChange(val) {
      this.pagesize = val
      this.getData()
    },
    // 获取当前第几页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getData()
    },
    // table 动态赋值
    commonFormat(row, props) {
      return row[props]
    },
    orderdateFormat(row) {
      return row.createOrderDate.split(' ')[0]
    },

    /**
     * orderTypeChange
     * 单据类型查询
     */
    orderTypeChange () {
      this.getData()
      // console.log('this.queryData', this.queryData)
    },
  },
}
</script>

<style lang="scss" scoped>
.basic_info {
  width: 100%;
  height: calc(100vh - 1.875117rem);
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 0 8px 8px;
  display: flex;
  flex-direction: column;
}

.info_operation_btn {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;

  ::v-deep .el-button {
    width: 80px;
    height: 30px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 5px;
    border: none;
    margin-right: 6px;
    margin-left: 0;
  }

  ::v-deep .el-select {
    width: 80px;
    height: 30px;
    box-sizing: border-box;
    margin-right: 6px;

    .el-input {
      .el-input__inner {
        height: 30px;
        border: none;
        font-size: 12px;
      }

      .el-input__suffix {
        height: 30px;
        display: flex;
        align-items: center;
      }
    }
  }

  .date_picker_style {
    width: 178px;
    height: 30px;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    opacity: 1;
    border-radius: 4px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 5px;
    margin-right: 6px;
    position: relative;

    p {
      width: 100%;
      height: 30px;
      margin: 0;
      font-size: 0.018751rem;
      color: #666;
      font-family: HelveticaNeue;
      color: #666666;
      line-height: 30px;
    }

    i {
      font-size: 15px;
      color: #d9d9d9;
    }

    ::v-deep .el-date-editor {
      width: 200px;
      height: 30px;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2001;

      .el-range-input {
        font-size: 12px;
      }

      .el-range-separator {
        line-height: 30px;
        font-size: 12px;
      }
    }
  }

  .el-button--default {
    color: #666;
  }

  .btn_left {
    width: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    p {
      font-size: 12px;
      color: #666;
      margin: 0 5px 0 10px;
    }

    ::v-deep .el-checkbox {
      display: flex;
      align-items: center;
      margin-left: 8px;

      .el-checkbox__input {
        height: 15px;
      }

      .el-checkbox__label {
        font-size: 12px;
        padding-left: 5px;
        // color: #666;
      }

      .is-checked {
        .el-checkbox__inner {
          background: #1a93fa;
          border-color: #1a93fa;
        }
      }
    }
  }

  .btn_right {
    width: 40%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .el-button {
      width: 60px;
    }

    .set_up {
      font-size: 23px;
      color: rgb(153, 153, 153);
    }
  }
}

.disabled_button {
  background: #cbced3 !important;
  color: #666 !important;
}

.info_content_div {
  width: 100%;
  height: calc(100% - 50px);
  background: #fff;
  box-sizing: border-box;
  padding: 0 12px;
  display: flex;

  .div_table {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .div_screen {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      ::v-deep .el-select {
        width: 120px;
        height: 30px;
        box-sizing: border-box;
        border-radius: 4px;

        .el-input {
          .el-input__inner {
            height: 30px;
            border-color: #e3e3e3;
            font-size: 12px;
            padding-left: 6px;
          }

          .el-input__suffix {
            height: 30px;
            display: flex;
            align-items: center;
          }
        }
      }

      input {
        width: 120px;
        height: 30px;
        background: #ffffff;
        border: 1px solid #e3e3e3;
        opacity: 1;
        border-radius: 4px;
        font-size: 12px;
        color: #666;
        box-sizing: border-box;
        padding: 0 6px;

        &:focus {
          outline: none;
          border-color: #1890ff;
        }
      }

      .screen_left {
        // (50+5+120+15)*4=760px
        width: 30%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        >div {
          width: 180px;
          height: 30px;
          margin-top: 15px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          margin-right: 15px;

          >p {
            margin: 0;
            width: 50px;
            margin-right: 10px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #666666;
            text-align: justify;
            text-justify: distribute-all-lines;
            /*ie6-8*/
            text-align-last: justify;
            /* ie9*/
            -moz-text-align-last: justify;
            /*ff*/
            -webkit-text-align-last: justify;
            /*chrome 20+*/
          }
        }

        .line_dialog {
          .dialog_input {
            flex: 1;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-right: 0;
            text-align: left;
            text-align-last: left;

            ::v-deep .el-select {
              i {
                display: none;
              }
            }

            i {
              position: absolute;
              right: 6px;
              color: #bfbfbf;
              font-size: 15px;
              cursor: pointer;
            }
          }
        }

        p {
          font-size: 12px;
          color: #666;
          margin: 0 5px 0 10px;
        }

        ::v-deep .el-checkbox {
          display: flex;
          align-items: center;
          margin-left: 8px;
          margin-right: 8px;

          .el-checkbox__input {
            height: 15px;
          }

          .el-checkbox__label {
            font-size: 12px;
            padding-left: 5px;
            // color: #666;
          }

          .is-checked {
            .el-checkbox__inner {
              background: #1a93fa;
              border-color: #1a93fa;
            }
          }
        }
      }

      .screen_right {
        padding-top: 10px;
        width: 70%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        box-sizing: border-box;

        ::v-deep .el-button {
          width: 60px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          border-radius: 5px;
          border: none;
        }

        ::v-deep .el-select {
          width: 80px;
          margin-right: 6px;
        }

        // .date_picker_style {
        //   width: 3.375211rem;
        //   height: 30px;
        //   background: #ffffff;
        //   border: 1px solid #d9d9d9;
        //   opacity: 1;
        //   border-radius: 0.075005rem;
        //   position: relative;
        //   display: flex;
        //   align-items: center;
        //   justify-content: space-between;
        //   box-sizing: border-box;
        //   padding: 5px;
        //   margin-right: 6px;
        //   position: relative;
        //   p {
        //     width: 100%;
        //     height: 30px;
        //     margin: 0;
        //     font-size: 0.018751rem;
        //     color: #666;
        //     font-family: HelveticaNeue;
        //     color: #666666;
        //     line-height: 30px;
        //   }
        //   i {
        //     font-size: 0.262516rem;
        //     color: #d9d9d9;
        //   }
        //   ::v-deep .el-date-editor {
        //     width: 3.375211rem;
        //     height: 30px;
        //     opacity: 0;
        //     position: absolute;
        //     top: 0;
        //     left: 0;
        //     z-index: 2001;
        //     .el-range-input {
        //       font-size: 12px;
        //     }
        //     .el-range-separator {
        //       line-height: 30px;
        //       font-size: 12px;
        //     }
        //   }
        // }
        ::v-deep .el-date-editor {
          width: 210px;
          height: 30px;
          background: #ffffff;
          border: 1px solid #d9d9d9;
          margin-right: 6px;
          padding: 3px 6px;

          .el-range__icon {
            position: absolute;
            right: 0;
            line-height: 30px;
          }

          .el-range-separator {
            line-height: 24px;
          }

          .el-range-input {
            font-size: 12px;
          }

          .el-range__close-icon {
            display: none;
          }
        }
      }
    }

    .table_content {
      height: calc(100% - 100px);

      ::v-deep .el-table {
        // border-color: #e3e3e3;
        border: 1px solid #e3e3e3;
        box-sizing: border-box;

        th,
        td {
          padding: 0;
          color: #666;
          box-sizing: border-box;
          border-right: 1px solid #e3e3e3;

          &:last-child {
            border-right: none;
          }
        }

        .el-table__header {
          tr {
            &:last-child {
              th {
                background: rgb(237, 237, 237) !important;
              }
            }
          }
        }

        .cell {
          line-height: 30px;
          font-size: 12px;
        }

        // colgroup {
        //   width: 100% !important;
        //   display: flex;
        //   align-items: center;
        // }
        // col {
        //   flex: 1;
        // }
        // tr {
        //   width: 100%;
        //   display: flex;
        // }
        // .el-table__header {
        //   th {
        //     &:first-child {
        //       // max-width: 0.937559rem;
        //       max-width: .843803rem;
        //     }
        //     &:nth-child(2) {
        //       max-width: 1.312582rem;
        //     }
        //   }
        // }
        // .el-table__body {
        //   height: 30px;
        //   .el-table__row {
        //     td {
        //       // flex: 1;
        //       width: 100%;
        //       &:first-child {
        //         // flex: 0;
        //         // width: 500px !important;
        //         max-width: 0.937559rem;
        //         // .cell {
        //         //   order: -99;
        //         // }
        //       }
        //       &:nth-child(2) {
        //         max-width: 1.312582rem;
        //         .cell {
        //           order: -99;
        //         }
        //       }
        //       // &:last-child {
        //       //   max-width: 80px;
        //       //   .cell {
        //       //     order: 99;
        //       //   }
        //       // }
        //     }
        //   }
        //   .current-row {
        //     background: #e3f6ff;
        //   }
        // }
        .el-table__body tr:hover>td {
          background: #e3f6ff;
        }

        .el-table__footer-wrapper {
          td {
            background: #f4f4f4;
            border: none;
          }
        }

        //滚动条的宽度
        ::-webkit-scrollbar {
          width: 8px;
          height: 10px;
          background-color: #e5e5e5;
        }

        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #c9c9c9;
        }
      }
    }

    .table_pagination {
      width: 100%;
      height: 50px;
      box-sizing: border-box;
      padding: 8px 0;
      display: flex;

      .pagination_div {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        ::v-deep .el-pagination {
          padding: 0;
          height: 30px;

          .el-pagination__sizes {
            margin: 0;

            .el-input {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}
</style>